<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // html css js组成了一个页面
        // 页面渲染可以分为加载和解析两部分
        // 先有解析再有加载
        // 解析和加载是异步完成的

        // 解析
        // domTree > DOM树（深度优先解析原则），浏览器引擎会把HTML页面解析成一个DOM树
        // DOM树的构建就是HTML节点的解析的过程

        // cssTree >CSS树(深度优先)，对照HTML关系（兄弟关系）构建css树
        // 在构建css树的过程中会把无用不兼容的样式去掉

        // renderTree >渲染树 =domTree+CSSTree
        // renderTree构建完毕后，浏览器会根据它绘制页面
        // 渲染树每个节点都有自己的样式
        // renderTree中不包含display:none head 之类不需要绘制的节点
        // visibility：hidden相对应的节点是包含在渲染树上的
        // 渲染树上的每一个节点都会被当做一个盒子，具有内容填充 边距 边框 位置 宽高 其他样式
        // layout 布局

        // 当js对页面的节点进行操作时，就会产生回流或重绘

        // 回流 重排 reflow
        // 回流一定会引起重绘
        // 因为节点的尺寸、布局、display：none block，这些改变的时候，渲染树中的一部分或者全部需要重新构建就会产生回流
        // 一个页面最少要有一次回流
        // 引起回流的因素：
        // DOM节点增加删除
        // DOM节点位置变化
        // 元素的尺寸、边距、填充、边框、宽高、
        // DOM节点display显示与否
        // 页面的渲染初始化
        // 浏览器窗口尺寸变化 >resize
        // 向浏览器请求某些样式信息(因为这些样式需要计算) offset、scroll、client、width、height、getComputedStyle()、currentStyle
        // 在写DOM过程中要注意回流的次数和渲染树重构规模的问题
        //减少重构规模，尽量在已有元素后面添加元素，不要在头部添加元素

        // 重绘 repaint
        // 重绘不一定是回流产生的后续反应
        // 回流时，浏览器会重新构建受影响部分的渲染树，引起重绘
        // 回流完成后，浏览器会根据新的渲染树重新绘制回流影响部分节点，这个重新绘制的过程就是重绘

        // 浏览器对回流和重绘的优化
        // 浏览器有一个队列,存放对DOM的操作,当到一定数量或时间之后,进行批量处理,然后清空队列 
        // 为了防止队列中DOM操作,影响获取样式属性计算结果,会强制清空队列.把获取属性的操作放到队列中去

        // 减少回流的方法
        // 设置样式的时候,使用Css类名的方式,不要单独操作
        // 动态值el.style.cssText='\\'
        // 利用文档碎片document.createDocumentFragment()
        // 通过display:none和display:block,将多次回流减少到两次
        function test() {
            // 设置none,引起一次回流,然后设置样式并不会引起回流
            el.style.display = 'none'
                // ....多种样式
                //block,引起回流,引起两次回流
            el.style.display = 'block'
        }
        // 动画元素一定要绝对定位,不要操作margin.绝对定位会脱离文档流
        //table回流成本大

        // 加载
    </script>
</body>

</html>